<?php

use App\Livewire\Actions\Logout;
use Illuminate\Support\Facades\Auth;
use Livewire\Volt\Component;

new class extends Component {
    public string $password = '';

    /**
     * Delete the currently authenticated user.
     */
    public function deleteUser(Logout $logout): void
    {
        $this->validate([
            'password' => ['required', 'string', 'current_password'],
        ]);

        tap(Auth::user(), $logout(...))->delete();

        $this->redirect('/', navigate: true);
    }
}; ?>

<section class="mt-10 space-y-6">
    <div class="relative mb-5">
        <h2 class="text-xl font-bold tracking-tight text-gray-900 ">{{ __('Delete account') }}</h2>
        <p class="mt-1 text-sm text-gray-500 ">{{ __('Delete your account and all of its resources') }}</p>
    </div>

    <div x-data="{ modalOpen: false }" @keydown.escape.window="modalOpen = false" class="relative z-50 w-auto h-auto">
        <button 
            @click="modalOpen = true" 
            type="button" 
            class="inline-flex items-center justify-center px-4 py-2 text-sm font-medium tracking-wide text-white transition-colors duration-200 rounded-md bg-red-600 hover:bg-red-700 focus:ring-2 focus:ring-offset-2 focus:ring-red-500 focus:shadow-outline focus:outline-none">
            {{ __('Delete account') }}
        </button>

        <template x-teleport="body">
            <div 
                x-show="modalOpen" 
                class="fixed top-0 left-0 z-[99] flex items-center justify-center w-screen h-screen" 
                x-cloak>
                
                <div 
                    x-show="modalOpen" 
                    x-transition:enter="ease-out duration-300"
                    x-transition:enter-start="opacity-0"
                    x-transition:enter-end="opacity-100"
                    x-transition:leave="ease-in duration-300"
                    x-transition:leave-start="opacity-100"
                    x-transition:leave-end="opacity-0"
                    @click="modalOpen = false" 
                    class="absolute inset-0 w-full h-full bg-black/20 backdrop-blur-sm">
                </div>
                
                <div 
                    x-show="modalOpen"
                    x-trap.inert.noscroll="modalOpen"
                    x-transition:enter="ease-out duration-300"
                    x-transition:enter-start="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
                    x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100"
                    x-transition:leave="ease-in duration-200"
                    x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100"
                    x-transition:leave-end="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
                    class="relative w-full max-w-lg p-6 overflow-hidden transition-all transform bg-white rounded-lg shadow-xl ">
                    
                    <div class="flex items-center justify-between pb-2">
                        <h3 class="text-lg font-bold text-gray-900 ">{{ __('Are you sure you want to delete your account?') }}</h3>
                        <button 
                            @click="modalOpen = false" 
                            class="absolute top-0 right-0 flex items-center justify-center w-8 h-8 mt-5 mr-5 text-gray-600 rounded-full hover:text-gray-800 hover:bg-gray-50  ">
                            <svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
                            </svg>  
                        </button>
                    </div>
                    
                    <form wire:submit="deleteUser" class="space-y-6 mt-4">
                        <p class="text-sm text-gray-500 ">
                            {{ __('Once your account is deleted, all of its resources and data will be permanently deleted. Please enter your password to confirm you would like to permanently delete your account.') }}
                        </p>

                        <div class="space-y-1">
                            <label class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70" for="password">
                                {{__('Password')}}
                            </label>
                            <input 
                                wire:model="password" 
                                type="password" 
                                class="flex w-full h-10 px-3 py-2 text-sm bg-white border rounded-md peer border-neutral-300 ring-offset-background placeholder:text-neutral-400 focus:border-neutral-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-neutral-400 disabled:cursor-not-allowed disabled:opacity-50  "
                                required
                            />
                            @error('password')
                                <span class="mt-1 text-sm text-red-600 ">{{ $message }}</span>
                            @enderror
                        </div>

                        <div class="flex justify-end space-x-2">
                            <button 
                                type="button" 
                                @click="modalOpen = false"
                                class="inline-flex items-center justify-center px-4 py-2 text-sm font-medium transition-colors duration-200 bg-white border rounded-md border-neutral-300 text-neutral-800 hover:bg-neutral-100 focus:ring-2 focus:ring-offset-2 focus:ring-neutral-400 focus:shadow-outline focus:outline-none ">
                                {{ __('Cancel') }}
                            </button>

                            <button 
                                type="submit" 
                                class="inline-flex items-center justify-center px-4 py-2 text-sm font-medium tracking-wide text-white transition-colors duration-200 rounded-md bg-red-600 hover:bg-red-700 focus:ring-2 focus:ring-offset-2 focus:ring-red-500 focus:shadow-outline focus:outline-none">
                                {{ __('Delete account') }}
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </template>
    </div>
</section>
